<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>作品预览</text>
		</pageHeader>
		<view style="height: 16rpx;width: 750rpx;background-color: #F5F5F5;"></view>
		<view class="author_message">
			<image :src="userMessage.headPicture" mode=""></image>
			<view class="author_message_word">
				<view><text>{{userMessage.username?userMessage.username:userMessage.nickname}}</text><text>{{style}}</text></view>
				<view><text>{{layout}}</text><text style="margin-left:1em;">{{area}}平方米</text><text style="margin-left:1em;">{{place}}</text></view>
			</view>
		</view>
		<text class="title">{{title}}</text>
		<view class="time">
			<text>{{time_day}}</text>
			<text>{{time_hour}}</text>
		</view>
		<editor id="editor" :read-only='true' class="ql-container designExample"   @ready="onEditorReady" ></editor>
		<view style="height: 98rpx;" v-if='!isfromMy'></view>
		<view class="button" @tap="toAdd" v-if='!isfromMy'>发布</view>
	</view>
</template>

<script>
	import url from '@/common/util/personal.js'
	import '@/static/js/quil.js'
	import urls from "@/common/util/homeArtIndex.js"
	import pageHeader from "@/components/header/header.vue"
	export default {
		components: {pageHeader},
		data() {
			return {
				title:"",
				style:"",
				layout:"",
				place:"",
				area:"",
				html:"",
				time_day:"",
				time_hour:"",
				isEdit:false,
				id:"",
				isfromMy:false,
				isSuccess:false,
				examine:"",
				userMessage:{}
			};
		},
		onLoad(e) {
			if(e.isEdit){
				this.isEdit=true
				this.id=e.id
			}
			if(e.isfromMy){
				this.isfromMy=true
			}
			if(e.examine){
				this.examine=e.examine
			}
			if(e.isSuccess){
				this.isSuccess=true
			}
			this.getMessage()
			this.getuser()
		},
		methods: {
			async getuser(){
				let res=await url.getDesignerInfo({userId:localStorage.getItem("userId")})
				this.userMessage=res.data
			},
			getMessage() {
				let message=JSON.parse(localStorage.getItem("releaseDesignMessage"))
				this.title=message.title
				this.style=message.style=='其它'?message.otherStyle:message.style
				this.layout=message.layout=='其它'?message.otherLayout:message.layout
				this.place=message.place=='其它'?message.otherPlace:message.place
				this.area=message.area
				this.html=message.html
				let date=new Date()
				let y=date.getFullYear()
				let m=date.getMonth() +1
				m=(m<10?("0"+m):m)
				let d=date.getDate()
				d=(d<10?("0"+d):d)
				let h=date.getHours()
				h=(h<10?("0"+h):h)
				let mm=date.getMinutes()
				mm=(mm<10?("0"+mm):mm)
				this.time_day=y+'-'+m+'-'+d
				this.time_hour=h+':'+mm
			},
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			onEditorReady(){
				uni.createSelectorQuery().select('#editor').context((res) => {
				    res.context.setContents({
						delta:this.html
					})
				}).exec()
			},
			async toAdd(){
				uni.showLoading({
					mask: true
				})
				let message=JSON.parse(localStorage.getItem("releaseDesignMessage"))
				let data={}
				data.designTitle=message.title
				data.userId=localStorage.getItem("userId")
				data.coverImage=message.imgSrc
				data.designStyle=message.style=='其它'?12:message.styleState
				data.designApartment=message.layout=='其它'?12:message.layoutState
				data.designPlace=message.place=='其它'?12:message.placeState
				data.styleContent=message.style=='其它'?message.otherStyle:""
				data.apartmentContent=message.layout=='其它'?message.otherLayout:""
				data.placeContent=message.place=='其它'?message.otherPlace:""
				data.areaNumber=message.area
				data.designContent=JSON.stringify(message.html) 
				data.introduce=message.html1
				data.draft=1
				data.examine=this.examine
				let res
				if(this.isEdit&&!this.isSuccess){
					data.productId=""
					data.designId=this.id
					res=await urls.updaterotationChart(data)
				}else if(this.isEdit&&this.isSuccess){
					data.designId=this.id
					res=await urls.addArticleEdit(data)
				}else{
					res=await urls.addArticle(data)
				}
				uni.hideLoading()
				if(res.code==0){
					localStorage.removeItem("releaseDesignMessage")
					uni.navigateTo({
						url: '/pages/releaseDesign/underReview?fromLook=true'
					})
				}
			}
		},
	}
</script>

<style lang="scss">
.top_padding{
	height: 42rpx;
	background-color: #FFFFFF;
	position: fixed;
	width: 750rpx;
	top: 85rpx;
	z-index: 995;
	view{
		position: absolute;
		bottom: 0;
		left: 0;
	}
}
.author_message{
	border-bottom: 1rpx solid #EEEEEE;
	padding: 50rpx 0 28rpx 30rpx;
	display: flex;
	align-items: center;
	image{
		height: 92rpx;
		width: 92rpx;
		border-radius: 50%;
	}
	.author_message_word{
		margin-left: 20rpx;
		height: 92rpx;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}
}
.author_message_word>view:first-of-type{
	display: flex;
	align-items: center;
	position: relative;
	top: 5rpx;
}
.author_message_word>view:first-of-type>text:first-of-type{
	font-size: 32rpx;
	line-height: 32rpx;
	color: #333333;
	font-weight: bold;
	bottom: unset;
}
.author_message_word>view:first-of-type>text:last-of-type{
	display: block;
	height: 36rpx;
	padding: 0 13rpx;
	background-color: #D7BD9F;
	border-radius: 18rpx;
	color: #85623B;
	font-size: 26rpx;
	line-height: 36rpx;
	margin-left: 20rpx;
	bottom: unset;
	white-space: pre;
}
.author_message_word>view:last-of-type{
	color: #999999;
	letter-spacing: 1rpx;
	font-size: 24rpx;
	line-height: 24rpx;
	position: relative;
	bottom: 8rpx;
}
.title{
	font-size: 32rpx;
	display: block;
	margin-top: 40rpx;
	margin-left: 30rpx;
	letter-spacing: 1rpx;
	font-weight: bold;
}
.time{
	font-size: 24rpx;
	color: #999999;
	letter-spacing: 1rpx;
	margin-top: 20rpx;
	padding-left: 10rpx;
	text{
		margin-left: 20rpx;
	}
}
#editor{
	height: unset;
	min-height:  425rpx;
	overflow-y: unset;
}
.button{
	height: 98rpx;
	width: 750rpx;
	position: fixed;
	text-align: center;
	line-height:98rpx ;
	font-size: 34rpx;
	letter-spacing: 1rpx;
	color: #FFFFFF;
	bottom: 0;
	left: 0;
	z-index: 10;
	background-color: #C84739;
}
</style>
